﻿@page "/tests/charts"
<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Line</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( lineChart, GetLineChartDataset ))">Redraw</Button>
                <Button Color="Color.Primary" Outline Clicked="@(async ()=> await ShiftLineChart())">Shift</Button>
                <Button Color="Color.Primary" Outline Clicked="@(async ()=> await PopLineChart())">Pop</Button>
                <Button Color="Color.Danger" Outline Clicked="@(async ()=> await lineChart.ChangeType(ChartType.Bar))">Change Type</Button>
            </CardBody>
            <CardBody>
                <LineChart @ref="lineChart" TItem="double" Options="@lineChartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Bar</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( barChart, GetBarChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="barChart" Type="ChartType.Bar" TItem="double" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Pie</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( pieChart, GetPieChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="pieChart" Type="ChartType.Pie" TItem="double" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Scatter</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( scatterChart, GetScatterChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="scatterChart" Type="ChartType.Scatter" TItem="ScatterChartPoint" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Bubble</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( bubbleChart, GetBubbleChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="bubbleChart" Type="ChartType.Bubble" TItem="BubbleChartPoint" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Polar Area</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( polarAreaChart, GetPolarAreaChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="polarAreaChart" Type="ChartType.PolarArea" TItem="double" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Radar</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( radarChart, GetRadarChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="radarChart" Type="ChartType.Radar" TItem="double" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Doughnut</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( doughnutChart, GetDoughnutChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="doughnutChart" Type="ChartType.Doughnut" TItem="double" Options="@chartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Line</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await SetDataAndUpdate( lineChartWithData, RandomizeData ))">Change Data</Button>
            </CardBody>
            <CardBody>
                <LineChart @ref="lineChartWithData" TItem="double" Options="@line2ChartOptions" />
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Line chart with two Y axis</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( multiAxisLineChart, GetLineChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <LineChart @ref="multiAxisLineChart" TItem="double" OptionsObject="@multiAxisLineChartOptions" />
            </CardBody>
        </Card>
    </Column>
</Row>